<template>
  <div
    style="
      width: 715px;
      height: 794px;
      background-color: rgba(0, 0, 0, 0.59);
      position: fixed;
      top: 500px;
      left: 50%;
      transform: translate(-50%, -50%);
    "
  >
    <div id="production-storage-container">
      <div class="card-top">企业专职队</div>
      <!-- 基本信息 -->
      <div class="base-info">
        <Title :title-info="basicInfo" />
        <el-form
          :model="data.basicInfoData"
          class="demo-ruleForm"
          status-icon
          style="width: 95%; margin: 0 auto"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item id="before" label="名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称">
                <el-input v-model.trim="data.basicInfoData.qyzzdmc" style="width: 98%" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="justify-content: space-between">
            <el-col :span="10">
              <el-form-item label="机构类型">
                <el-select
                  id="select"
                  v-model="data.basicInfoData.jglx"
                  placeholder="请选择机构类型"
                  style="width: 95%"
                >
                  <el-option
                    v-for="item in jgOptions"
                    :key="item.zddm"
                    :label="item.zdmc"
                    :value="item.zddm"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="人员数量">
                <el-input v-model.trim="data.basicInfoData.rysl" style="width: 95%" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注">
                <el-input v-model.trim="data.basicInfoData.bz" style="width: 98%" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 联系人信息 -->
      <div class="contacts-info">
        <Title :title-info="contactInfo" />
        <el-form
          label-width="80px"
          :model="contactData"
          class="demo-ruleForm"
          status-icon
          style="width: 98%; margin: 0 auto"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item
                label-width="65px"
                label="负责人"
                style="margin-bottom: 5px"
              ></el-form-item>
            </el-col>
          </el-row>

          <el-row style="justify-content: space-between">
            <el-col :span="10">
              <el-form-item label="姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名">
                <el-input v-model.trim="contactData.rymc" style="width: 90%" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务">
                <el-input v-model.trim="contactData.ryzw" style="width: 90%" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="justify-content: space-between">
            <el-col :span="10">
              <el-form-item label="手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机">
                <el-input v-model.trim="contactData.ryyddh" style="width: 90%" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="值班电话">
                <el-input v-model.trim="contactData.ryzbdh" style="width: 90%" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 附件 -->
      <div class="upload-container">
        <Title :title-info="attachment" />
        <upload
          ref="fileupload"
          :upload-title="uploadTitle"
          @upload-success="uploadCuccess"
          @uploadDelete="uploadDelete"
        />
      </div>

      <!-- 底部按钮 -->
      <div class="button">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-button @click="closeEdit">取&nbsp;消</el-button>
          </el-col>
          <el-col :span="8">
            <el-button @click="formReset">重&nbsp;置</el-button>
          </el-col>
          <el-col :span="8">
            <el-button style="background-color: rgba(2, 151, 155, 1)" @click="SaveProfessional"
              >保&nbsp;存</el-button
            >
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue'
import upload from '@/components/upload/index.vue'
import FooterButton from '@/components/FooterButton/index.vue'
import Title from '@/components/title/index.vue'
import { ElMessage } from 'element-plus'
import { queryProfessionalInfo, AddProfessionalInfo } from '@/service/api/ProfessionalTeam'
import { queryZdZdmcInfo } from '@/service/api/common'
import { useChemicalStore } from '@/store'
import { useProfessionalStore } from '@/store'
import { checkNumberTypeAndLength } from '@/utils/common'
import qyzzd_icon from '@/assets/image/mapIcon/qyzzd-icon.png'
const props = defineProps<{
  qyzzdId: any
}>()
const jgOptions = ref()
const data = useProfessionalStore()
const contactData = reactive({
  ...data.basicInfoData.fzrxxInfo,
})
//查询机构类型
// queryZdZdmcInfo({key:'jglx'}).then(res => console.log(res))
const chemicalStore = useChemicalStore()
const fileupload = ref()
const fjxxInfoList = ref([
  {
    fjlx: '',
    fjmc: '',
    fjdz: '',
    sfyx: 1,
    qyid: chemicalStore.qyInfo.id,
  },
])
const basicInfo = ref('基本信息')
const contactInfo = ref('联系人信息')
const attachment = ref('附件')

const uploadTitle = ['企业专职队附件']

const basicInfoRef = ref()
const contactInfoRef = ref()
const requiredNameArr = ['qyzzdmc', 'jglx', 'rymc', 'ryyddh', 'ryzbdh', 'ryzw']
const emits = defineEmits(['closeProfessional', 'uploadHandler'])
// 关闭编辑窗口
const closeEdit = () => {
  emits('closeProfessional', false)
}
function clickFileHandle() {
  fileupload.value.fjxxInfoListsf = data.basicInfoData.fjxxInfoList || fjxxInfoList.value
}

function uploadCuccess(val: any) {
  fjxxInfoList.value = val.value
}
function uploadDelete(val: any) {
  fjxxInfoList.value = val
}
// 重置表单
const clearBasicInfo = () => {
  // Object.keys(data.basicInfoData).map((key) => delete data.basicInfoData[key])
  data.basicInfoData.qyzzdmc = ''
  data.basicInfoData.jglx = jgOptions.value[0].zddm
  data.basicInfoData.rysl = ''
  data.basicInfoData.bz = ''
  contactData.rymc = ''
  contactData.ryzw = ''
  contactData.ryyddh = ''
  contactData.ryzbdh = ''
}
const clearContact = () => {
  Object.keys(contactData).map((key) => delete contactData[key])
}
function queryxk() {
  queryZdZdmcInfo({ key: 'jglx' }).then((res: any) => {
    jgOptions.value = res
    if (!data.basicInfoData.jglx) {
      data.basicInfoData.jglx = res[0].zddm
    }
  })
}
//重置表单
const formReset = () => {
  //重置表单
  clearBasicInfo()
  clearContact()
}

//保存企业专职队
const SaveProfessional = async () => {
  // let flag = false

  // if (
  //   !data.basicInfoData.qyzzdmc ||
  //   !data.basicInfoData.jglx ||
  //   !contactData.rymc ||
  //   !contactData.ryzw ||
  //   !contactData.ryyddh ||
  //   !contactData.ryzbdh
  // ) {
  //   // console.log(key, '字段未填写')
  //   flag = true
  // }
  // if (flag) {
  //   return (chemicalStore.FormCheckConfirmShow = true)
  // }
  if (contactData.ryyddh && !checkNumberTypeAndLength(contactData.ryyddh, '手机号', 11)) {
    return
  }
  if (
    data.basicInfoData.rysl &&
    !checkNumberTypeAndLength(data.basicInfoData.rysl, '人员数量', 3)
  ) {
    return
  }

  if (
    fjxxInfoList.value.length > 0 &&
    fjxxInfoList.value[fjxxInfoList.value.length - 1].fjlx == ''
  ) {
    fjxxInfoList.value.splice(fjxxInfoList.value.length - 1, 1)
  }

  //如果已经标注过，需要修改dom
  if (data.basicInfoData?.sfbh === 1) {
    window.GOverlayArray.forEach((item: any) => {
      if (item.name === data.basicInfoData.id) {
        const el = document.createElement('div')
        el.className = 'maplabelpopup-one'
        // 标牌禁止右击
        el.setAttribute('oncontextmenu', 'return false')
        const img = document.createElement('img')
        img.src = qyzzd_icon
        const div = document.createElement('div')
        div.innerText = data.basicInfoData.qyzzdmc
        el.appendChild(img)
        el.appendChild(div)

        item.overlay.updateDom(el)
      }
    })
  }

  data.basicInfoData.qyid = chemicalStore.qyInfo.id
  data.basicInfoData.fzrxxInfo = contactData
  data.basicInfoData.fzrxxInfo.qyid = chemicalStore.qyInfo.id
  data.basicInfoData.fzrxxInfo.rysx = '1'
  data.basicInfoData.fzrxxInfo.sfyx = '1'
  data.basicInfoData.fzrxxInfo.ssid = props.qyzzdId
  data.basicInfoData.fjxxInfoList = fjxxInfoList.value

  const res = await AddProfessionalInfo({ ...data.basicInfoData, sfyx: 1 })
    .then(() => {
      emits('uploadHandler')
      ElMessage.success('保存成功')
    })
    .catch(() => {
      ElMessage.error('保存成功')
    })

  closeEdit()
}
onMounted(() => {
  queryxk()
})
defineExpose({ clickFileHandle })
</script>

<style lang="less" scoped>
#production-storage-container {
  margin-top: 5px;
  margin-left: 7px;
  width: 700px;
  height: 780px;
  background: rgba(1, 7, 17, 0.8);
  .card-top {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    font-weight: 700;
    color: rgba(255, 254, 254, 1);
    font-family: 'MicrosoftYaHei-Bold';
    border-bottom: 1px solid #797979;
  }

  .base-info,
  .contacts-info {
    padding: 10px 0 0 10px;
  }
  .card-item-title {
    margin: 10px 20px 15px;
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    // background-image: url('@/assets/image/card-item-title-bck.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  /deep/.el-form-item__label {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
  }
  /deep/.el-input__inner {
    border: unset !important;
    color: rgba(255, 255, 255, 0.8);
  }
  /deep/.el-input__wrapper {
    border: 1px solid rgba(121, 121, 121, 1);
    box-shadow: unset;
    background-color: rgba(109, 109, 109, 0.3);
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  }

  .upload-container {
    padding: 0 10px;
    ::v-deep .upload-demo {
      height: 300px;
      .el-upload {
        .el-upload-dragger {
          height: 299px;
          .el-icon--upload {
            margin-top: 90px;
          }
        }
      }
    }
    ::v-deep .border-content {
      width: 110px;
    }
  }

  .button {
    position: relative;
    top: 46px;
    left: 5%;
    .el-button {
      width: 140px;
      height: 33px;
      border: unset;
      border-radius: 10px;
      font-size: 22px;
      color: rgba(255, 255, 255, 0.8);
      background-color: rgba(119, 128, 130, 1);
    }
  }
}
</style>

<style>
#star {
  position: absolute;
  left: -14px;
  top: 9px;
}
</style>
